<template>
  <!-- 初审  begin -->
  <div class="chuShen_box">
    <div class="chuShen_box_list">
      <!-- 普通用户列表 -->
      <div class="chuShen_box_list_ordinary">
        <div style="margin: 10px 0;">
          <div class="items">
            <div class="label">{{$t('m.cName')}}</div>
            <Input
              type="text"
              class="ivu-input-w200"
              v-model="search.fullName"
              :placeholder="$t('m.cName')"
            />
          </div>
          <div class="items">
            <div class="label">{{$t('m.phone')}}</div>
            <Input
              type="text"
              class="ivu-input-w200"
              :placeholder="$t('m.phone')"
              v-model="search.phone"
            />
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.clientChanne')}}</div>
            <Select v-model="search.platformId" class="ivu-input-w200">
              <Option value="">{{this.$t('m.entire')}}</Option>
              <Option v-for="item in platformList" :value="item.id">{{item.platformName}}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">{{$t('m.applyTime')}}</div>
            <DatePicker
              v-model="time1"
              type="daterange"
              :options="disDate"
              format="yyyy-MM-dd"
              @on-change="timeChange"
              :placeholder="$t('m.applyTime')"
              class="ivu-input-w200"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.Fēnpèishíjiān')}}</div>
            <DatePicker
              v-model="time2"
              type="daterange"
              :options="disDate"
              format="yyyy-MM-dd"
              @on-change="passTimeChange"
              :placeholder="$t('m.rLt')"
              class="ivu-input-w200"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{$t('m.chushen')}}</div>
            <Select v-model="search.firstChecker" class="ivu-input-w200" @on-change="adminFirstInstance" v-bind:placeholder="$t('m.chushen')">
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option v-for="item in adminFirstInstanceDataList" :value="item.account" :key="item.account">{{ item.account }}</Option>
            </Select>
          </div>
          <div class="search_content">
            <div class="search_btn_box">
              <Button class="search_btn" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
              <Button class="search_btn" @click="handleFilterReset" type="primary">{{$t('m.cháxún')}}</Button>
            </div>
            <Button @click="openAllotModal" type="primary" :disabled="chuShenSelectData.length === 0">
              <Icon type="md-add"/>{{$t('m.resetfenpei')}}
            </Button>
          </div>
        </div>
        <Table
          border
          :loading="chuShenListDataLoading"
          ref="selection"
          :columns="chuShenList"
          :data="chuShenListData"
          @on-selection-change="chuShenSelectTable"
        ></Table>
        <div style="margin-top: 5px;text-align: right;">
          <Page
            :total="chuShenPageSize"
            :current.sync="search.pageNumber"
            :page-size-opts="[10, 20, 40, 80, 100, 200, 400, 600, 800, 1000]"
            show-total
            show-elevator
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="handleSizeChange"
            style="margin: 15px 0;"
          ></Page>
        </div>
      </div>

      <!-- 弹窗 -->
      <div class="chuShen_box_popup">
        <!-- 分配初级人员 -->
        <Modal
          v-model="adminAllotButton"
          :title="$t('m.fēnpèichūjírényuán')"
          @on-ok="adminAllotButtonOk"
          @on-cancel="adminAllotButtonCancel"
        >
          <h4 style="display: inline;  margin: 35px;">{{$t('m.qǐngxuǎnzé')}}</h4>
          <Select
            v-model="adminAllotSelectData"
            style="width:60%;margin:auto;"
            v-bind:placeholder="$t('m.chushen')"
          >
            <Option
              v-for="item in adminFirstInstanceDataList"
              :value="item.account"
              :key="item.account"
            >{{ item.account }}</Option>
          </Select>
        </Modal>
      </div>
    </div>
  </div>
  <!-- 审核中心 end -->
</template>

<script>
export default {
  props: {
    tabsVal: ""
  },
  data() {
    return {
      disDate: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      time1: [],
      time2: [],
      platformList: [],
      search: {
        firstChecker: "",
        fullName: "",
        phone: "",
        platformId: "",
        assignedFirstDateBegin: "",
        assignedFirstDateEnd: "",
        applyDateBegin: "",
        applyDateEnd: "",
        pageNumber: 1,
        pageSize: 10,
      },
      poptip: false,
      bankinfo: [],
      orderGid: "",
      reason: "",
      chuShenListData: [],
      submitModel: false,
      adminPageSize: 10,
      adminAllotButton: false,
      baseInfoUserId: "",
      baseInfoOrderGid: "",
      baseInfoType: "2",
      creditOrderList: {},
      detailsBox: false,
      chuShenPageSize: 1,
      chuShenPages: 1,
      chuShenListDataLoading: false,
      chuShenSelectData: [],
      adminFirstInstanceData: "",
      adminFirstStatusData: "",
      adminAllotSelectData: "",
      adminFirstInstanceDataList: [],
      reqId: "",
      chuShenList: [
        {
          type: "selection",
          fixed: "left",
          width: 50,
          align: "center"
        },
        {
          title: this.$t("m.applyTime"),
          key: "ctime",
          fixed: "left",
          width: 200,
          align: "center"
        },
        {
          title: this.$t('m.Fēnpèishíjiān'),  //.. fixed 字段有问题
          key: "ctime",
          width: 200,
          align: "center"
        },
        {
          title: this.$t('m.clientChanne'),
          key: "platformName",
          width: 200,
          align: "center"
        },
        {
          title: this.$t("m.userNumber"),
          key: "userId",
          align: "center",
          width: 200
        },
        {
          title: this.$t("m.userName"),
          key: "fullName",
          width: 200,
          align: "center",
        },
        {
          title: this.$t("m.phone"),
          key: "phone",
          width: 200,
          align: "center",
        },
        {
          title: this.$t("m.userType"),
          key: "isFirst",
          width: 200,
          align: "center",
          render: (h, param) => {
            const {
              row: { isFirst }
            } = param;

            return h(
              "div",
              isFirst === 1 ? this.$t("m.shǒucìjièkuǎn") : this.$t("m.Ngàymai")
            );
          }
        },
        {
          title: this.$t("m.yònghùděngjí"),
          key: "levelName",
          width: 200,
          align: "center",
        },
        {
          title: this.$t("m.loanMount"),
          key: "loanAmount",
          align: "center",
          width: 200,
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.loanAmount));
          }
        },
        {
          title: this.$t("m.loanTimeLimit"),
          key: "loanDays",
          align: "center",
          width: 200
        },
        {
          title: this.$t('m.csry'),
          key: "checkerFirst",
          align: "center",
          width: 200
        },
        {
          title: this.$t("m.ApprovalStatus"),
          key: "status",
          align: "center",
          width: 200,
          render: (h, param) => {
            const {
              row: { status }
            } = param;
            if (status && status !== "none" && status !== "null") {
              const str = "m." + status;
              return h("div", this.$t(str));
            }
            return h("div", "");
          }
        }
      ]
    };
  },
  methods: {
    //  打开分配弹框
    openAllotModal() {
      this.adminAllotButton = true;
    },
    // 获取所有渠道名称
    getAllInvestorList() {
      this.$http.get("/api/laocai/traffic/platform/list").then(
        ({ body: { code, result } }) => {
          if (code == 0) {
            this.platformList = result;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    //  申请时间
    timeChange(e) {
      if (typeof e == "undefined") {
        this.$set(this.search, 'applyDateBegin', e[0]);
      } else if (typeof e == "object") {
        this.$set(this.search, 'applyDateBegin', e[0]);
        this.$set(this.search, 'applyDateEnd', e[1]);
      }
    },
    //  分配时间
    passTimeChange(e) {
      if (typeof e == "undefined") {
        this.$set(this.search, 'assignedFirstDateBegin', e[0]);
      } else if (typeof e == "object") {
        this.$set(this.search, 'assignedFirstDateBegin', e[0]);
        this.$set(this.search, 'assignedFirstDateEnd', e[1]);
      }
    },
    emptyQueryInfo() {
      this.time1 = [];
      this.time2 = [];
      this.search = Object.assign(
        {},
        {
          firstChecker: "",
          fullName: "",
          phone: "",
          platformId: "",
          pageNumber: 1
        }
      );
    },
    // 筛选条件
    handleFilterReset() {
      this.$set(this.search, "pageNumber", 1);
      this.chuShenQuery();
    },
    pageChange(e) {
      this.$set(this.search, "pageNumber", e);
      this.chuShenQuery()
    },
    // 每页显示数量
    handleSizeChange(val) {
      this.$set(this.search, "pageSize", val);
      this.chuShenQuery()
    },
    // 获取初审人员列表
    chuShenQueryPerson() {
      var url = `/api/laocai/sys/account/list?roleName=checker&enable=1`;
      this.$http.get(url).then(res => {
        if (res.data.code == 0) {
          this.adminFirstInstanceDataList = res.data.result.list;
        } else {
          this.$Message.success(this.$t("m.errorCode" + res.body.code));
        }
      });
    },
    // 请求数据
    chuShenQuery() {
      this.chuShenListDataLoading = true;
      const param = {
        status: 'checking_first',
        ...this.search,
      };
      let query = "";
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? "" : "&"}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/check/order-assign-list?${query}`;
      this.$http.get(url).then(res => {
        this.chuShenListDataLoading = false;
        if (res.data.code == 0) {
          let adminDataList = res.data.result.list;
          this.chuShenPageSize = res.data.result.size;
          this.chuShenListData = adminDataList;
        } else {
          this.chuShenPageSize = 0;
          this.chuShenListData = [];
        }
        if (!this.chuShenPageSize) {
          this.$Message.warning(this.$t("m.zhànshíméiyǒushùjù"));
          return;
        } else {
          this.$Message.success(this.$t("m.errorCode" + res.body.code));
        }
      });
    },
    // 分配初审人员确定
    adminAllotButtonOk() {
      this.$axios({
        method: "post",
        url: "/api/laocai/check/first/assign",
        headers: {
          "x-peacock-auth": localStorage.getItem("x-peacock-auth"),
          "Content-Type": "application/json;charset=UTF-8"
        },
        params: {},
        data: {
          orderGids: this.chuShenSelectData,
          operator: this.adminAllotSelectData
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.chuShenQuery();
            this.adminAllotSelectData = "";
          } else {
            this.$Message.success(this.$t("m.errorCode" + res.body.code));
          }
        })
        .catch(error => {
          this.$Message.warning(this.$t("m.qǐngqiúcuòwù"));
          console.log(error);
        });
    },
    // 分配初审人员取消
    adminAllotButtonCancel() {
      this.adminAllotSelectData = "";
    },
    // 初审人员选择
    adminFirstInstance() {
      // this.chuShenQuery();
    },
    // 选择admin表格选择初审人员数据
    chuShenSelectTable(selection) {
      this.chuShenSelectData = [];
      for (const key in selection) {
        this.chuShenSelectData.push(selection[key].orderGid);
      }
    },
    // 未选择数据分配按钮提示
    chuShenSelectDataHint() {
      this.$Message.warning(this.$t("m.qǐngxuǎnzéfēnpèishùjù"));
    }
  },
  watch: {
    tabsVal(val) {
      if (val === "name2") {
        this.chuShenQuery();
        this.getAllInvestorList();
        this.chuShenQueryPerson();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../static/style.css";
@import "../../../static/common.scss";

.items {
  display: inline-flex;
  width: 200px;
  flex-direction: column;
  margin-bottom: 10px;
  margin-right: 20px;
  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: left;
    color: #222;
    font-size: 14px;
  }
}

.search_content {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 20px 0;
  .search_btn_box {
    .search_btn {
      margin-right: 10px;
      width: 100px;
    }
  }
}

.remark_inprt {
  margin-left: 50px;
  width: 25%;
}
.btn-wrapper {
  margin-top: 12px;
  text-align: right;
}

.btn-wrapper a:hover,
.btn-wrapper a:active,
.btn-wrapper a:visited {
  color: #ffffff;
}

.zhuanzhuan {
  margin-bottom: 2px;
  position: relative;
}

.twoLoans {
  color: #fff;
  background: rgb(226, 61, 103);
  padding: 0px 5px;
  display: inline-block;
  border: rgb(226, 61, 103);
  margin-left: 5px;
  /* height: 20px; */
  font-size: 12px;
  /* transform: scale(0.7); */
}

.chuShen_box_title {
  color: #515a6e;
  margin: 0 15px;
  font-size: 16px;
  font-weight: bold;
  line-height: 75px;
}

.admin_head {
  height: 60px;
}

.admin_head_select {
  float: left;
}

.admin_head_select_button {
  float: right;
  width: 100px;
}

.admin_head_select_button_no {
  float: right;
  /* width: 100px; */
  opacity: 0.5;
}

.admin_page {
  float: right;
}

.details_head {
  overflow: hidden;
}

.details_head_title {
  height: 40px;
  font-size: 18px;
  font-weight: 700;
}

.ivu-modal-footer {
  border: 0px;
}

.ivu-modal-body {
  height: auto;
  overflow: hidden;
}

.passButton .btn-success {
  /* margin-left: 80px; */
  margin-left: 13%;
}

.passButton button {
  width: 15%;
  display: inline-block;
  margin-top: 0px !important;
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
